<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0; font-size: 14px; color: #666}
        ul,ol{margin: 0;padding: 0; list-style: none;}
        a {text-decoration: none; color: #666;}
        /*一级导航*/
        /*背景色*/
        ul.menu,ul.submenu {
            background-color: #ededed;
        }
        /*一级导航浮动*/
        ul.menu::after {
            content: '';
            display: block;
            clear: both;
        }
        ul.menu > li {
            float: left;
            width: 120px;
            line-height: 3em;
            height: 3em;
            text-align: center;
            cursor:pointer;
        }

        /*二级导航项分割线*/
        ul.submenu {
            /*默认隐藏*/
            display: none;
        }
        ul.submenu > li {
            border-bottom: 1px solid #fff;
        }

        /*内容区*/
        .content {
            min-height: 800px;
            background-color: #fff;
        }


        /*选中特效*/
        ul.menu > li:hover {
            background-color: #666;
        }
        ul.menu > li:hover > a {
            color: #fff;
        }
        ul.menu > li:hover > ul.submenu {
            display: block;
        }



        /*动画帧*/
        @keyframes fade {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /*基础动画样式*/
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        .fadeIn {
            animation-name: fade;
            animation-direction: normal;
        }
    </style>
</head>
<body>
<header>
    <!-- 一级导航开始 -->
    <nav>
        <ul class="menu">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">产品</a>
                <!-- 二级导航开始 -->
                <ul class="submenu">
                    <li><a href="#">小程序</a></li>
                    <li><a href="#">微信</a></li>
                    <li><a href="#">企业站</a></li>
                </ul>
                <!-- 二级导航结束 -->
            </li>
            <li>
                <a href="#">服务</a>
                <!-- 二级导航开始 -->
                <ul class="submenu">
                    <li><a href="#">技术支持</a></li>
                    <li><a href="#">产品外包</a></li>
                </ul>
                <!-- 二级导航结束 -->
            </li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">人才招聘</a></li>
        </ul>
    </nav>
    <!-- 一级导航结束 -->
</header>
</body>
</html>